<template>
    <div class="attrs">
        <div v-for="(item, i) in list" :key="i">
            <h3>{{item.name}}</h3>
            <ul>
                <li :class="attrs.includes(li) || colors.includes(li) ? 'active' : ''" @click="choseAttr(i, item.name, li)" v-for="(li, ind) in item.values" :key="ind">{{li}}</li>
            </ul>
        </div>

        <button @click="reset">重置</button>
    </div>
</template>

<script>
import axios from 'axios'
import { ref } from 'vue'
import store from '../store'
export default {
    setup(props, {emit}) {
        // ref vue3中可以使用ref声明响应式的数据 但是不能使用ref声明对象
        const list = ref([]) // 声明一个数组接收请求回来的json数据

        const attrs = ref([]) // 声明一个数组接收选中的尺寸

        const colors = ref([]) // 声明一个数组接收选中的颜色

        const thead = ref([])  // 给store传递数据的时候声明的数据也要是响应式的数据才会完成双向绑定
        
        

        // console.log(store);

        // 发送axios请求求情属性数据
        axios.get('/data.json').then(res => {
            // console.log(res);
            list.value = res.data
            // console.log(list);
        })

        // 选择属性的方法
        function choseAttr(i, attrName, attr) {
            const tbody = ref([])
            // console.log(i); i 表示选择的为第几类属性
            // console.log(attr); attr 选择的具体属性
            thead.value[i] = attrName
            // console.log(thead);
            store.changeThead(thead.value)
            if(i === 0) { // i是0表示选择的为尺寸属性
                let ind = attrs.value.indexOf(attr) // 判断该属性在尺寸数组中是否已经存在 如果存在则返回索引值 如果不存在则返回-1
                // console.log(ind);
                if(ind === -1) { // 表示数组中还没有该属性
                    attrs.value.push(attr)
                } else {
                    attrs.value.splice(ind, 1)
                }
                // console.log(attrs.value);
            } else { // i不是零的时候表示选择的是颜色属性
                let ind = colors.value.indexOf(attr) // 当选择颜色属性时 判断数组中是否已经存在该颜色 如果存在返回值是索引值 如果不存在返回-1

                if(ind === -1) {
                    colors.value.push(attr)
                } else {
                    colors.value.splice(ind, 1)
                }
            }

            // 组合表体中使用的数据
            for(let i = 0; i<attrs.value.length; i++) {
                if(colors.value.length > 0) {
                    for(let j = 0; j<colors.value.length; j++) {
                        tbody.value.push([attrs.value[i], colors.value[j]])
                    }
                } else {
                    thead.value.length = 1
                    tbody.value.push([attrs.value[i]])
                }
                
            }
            // console.log(tbody);

            store.changeTbody(tbody)
        }
        // 属性重置事件
        function reset() {
            store.state.thead = []
            store.state.tbody = []
            attrs.value = []
            colors.value = []
        }

        return {
            list,
            choseAttr,
            attrs,
            colors,
            reset
        }
    }
}
</script>

<style scoped lang="scss">
ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.attrs div {
    display: flex;
    align-items: center;
    border-bottom: 2px solid #333;
    h3 {
        font-size: 22px;
        font-weight: 600;
    }
    ul {
        display: flex;
        li {
            margin-left: 30px;
            font-size: 18px;
            border: 1px solid red;
            border-radius: 6px;
            padding: 3px 10px;
            cursor: pointer;
        }
        .active {
            background-color: red;
        }
    }
}
button {
  width: 120px;
  line-height: 30px;
  cursor: pointer;
  margin-top: 20px;}
</style>